<template lang="html">
  <div class="main-body" id="main-body">
    <div class="title" v-if="title">
     {{title}}
     <span class="left">
        <slot name="left"></slot>
     </span>
     <div class="right">
       <slot name="right"></slot>
     </div>
    </div>
    <div class="panel-body">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'panel',
  data () {
    return {
      fullHeight: 0
    };
  },
  props: {
    title: String | Boolean
  },
  mounted () {
    // this.fullHeight = document.getElementById('main-body').offsetHeight - 50;
    // window.addEventListener('resize', () => {
    //   this.fullHeight = document.getElementById('main-body').offsetHeight - 50;
    // });
  }
};
</script>

<style lang="css" scoped>
.main-body {
  width: 100%;
  box-shadow: 2px 6px 12px 2px rgba(0,0,0,.8);
  border-radius: 4px;
  border: 3px solid #ebeef5;
  background-color: rgba(255,255,255,.95);
  overflow: hidden;
  color: #303133;
  transition: .3s;
  position:relative;
  .title {
    position:relative;
    height: 50px;
    padding-left: 25px;
    padding-right: 25px;
    line-height: 50px;
    text-align: left;
    margin-left: 20px;
    margin-right: 20px;
    font-family: "Microsoft YaHei";
    font-weight: 700;
    font-size: 23px;
    .right {
      position: absolute;
      right: 0px;
      top: 0px;
      text-align: left;
    }
  }
  .title::before {
    content: '';
    position: absolute;
    width: 30px;
    height: 100%;
    top: 15px;
    left: 0px;
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: 18px 18px;
    background-image: url('../assets/u18.png');
  }
  .title::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 3px;
    top: 100%;
    left: 0px;
    overflow: hidden;
    border-top: 1px solid  rgba(150,150,150,.5);
    border-bottom: 1px solid  rgba(255,255,255,1);
    background-color: #eee;
  }
  .panel-body {
    position: absolute;
    width: 100%;
    position: absolute;
    top: 50px;
    bottom: 0px;
    left: 0px;
  }
}
</style>
